<template>
  <div>选项式</div>
  <p>count: {{ count }}</p>
  <p>doubleCount: {{ doubleCount }}</p>
  <button @click="fn">btn</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

// 仓库实例
import { useCounterStore } from "../../stores/counter";
import { mapState, mapActions } from "pinia";

// state和getters都是使用mapState
export default defineComponent({
  computed: {
    ...mapState(useCounterStore, ["count", "doubleCount"]),
  },
  methods: {
    ...mapActions(useCounterStore, ["increment"]),
    fn() {
      this.increment();
    },
  },
});
</script>
